<template lang="pug">
  .basicBox
    .avatarFile(:style="avatarStyle")
      upload-file(
        :filedList.sync="info.headImgUrl"
        :imgFlag="true"
        :limit="1"
        accept="image/*"
        :disabled="disabled"
        :avatarStyle="avatarStyle"
        :show-file-list="false"
      )
    .contentBox
      section.panel
        h3 基本信息
        form-box.basicForm(
          ref="basicForm"
          :fields="basicField"
          :formProps="{ disabled, 'label-position': 'top' }"
          :showBtns="false"
          :layoutCol="{ xs: 8, md: 8, lg: 8 }"
        )
      slot
</template>
<script>
import { regs } from '@/utils/validate'
// import { birthDayFromIdNo, getAgeByNo, sexFromIdNo } from '@/utils/util'

export default {
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    avatarStyle: {
      type: Object,
      default: () => ({ width: '300px', height: '300px' })
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
    }
  },
  computed: {
    info: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    basicField () {
      const { info } = this
      return [
        {
          label: '编号',
          key: 'id',
          initialValue: info.id || '',
          fieldProps: {
            disabled: true,
            placeholder: '保存后自动生成'
          }
        },
        {
          label: '教保师姓名',
          key: 'realName',
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.realName
        },
        {
          label: '手机号',
          key: 'mobile',
          rules: [{ required: true, message: '请输入' }, { pattern: regs.phone, message: '请输入正确的手机号码' }],
          initialValue: info.mobile
        },
        {
          label: '身份证号',
          key: 'idCard',
          rules: [{ required: false, message: '请输入' }, { pattern: regs.idcard, message: '请输入正确的身份证号' }],
          initialValue: info.idCard,
          events: {
            change: val => this.formChange(val, 'idCard')
          }
        },
        {
          label: '邮箱',
          key: 'email',
          initialValue: info.email,
          rules: [{ pattern: regs.email, message: '请输入正确的邮箱' }]
        },
        {
          label: '婚姻状况',
          key: 'marriage',
          type: 'select',
          initialValue: info.marriage,
          fieldProps: {
            options: [
              // { id: 0, name: '未知' },
              { id: 1, name: '未婚' },
              { id: 2, name: '已婚' },
              { id: 3, name: '离异' },
              { id: 4, name: '丧偶' }
            ]
          }
        },
        {
          label: '性别',
          key: 'gender',
          type: 'radio',
          rules: [{ required: false, message: '请选择' }],
          initialValue: info.gender?.toString(),
          fieldProps: {
            dictKey: 'sex',
            disabled: false,
            props: { value: 'value', label: 'label' }
          }
        },
        {
          label: '出生日期',
          key: 'birthday',
          type: 'date',
          formatFlag: true,
          fieldProps: {
            disabled: false
          },
          rules: [{ required: false, message: '请选择' }],
          initialValue: info.birthday
        },
        {
          label: '部门',
          key: 'department',
          rules: [{ required: false, message: '请输入' }],
          initialValue: info.department
        },
        {
          label: '岗位',
          key: 'position',
          rules: [{ required: false, message: '请输入' }],
          initialValue: info.position
        },
        {
          label: '入职日期',
          key: 'joinAt',
          type: 'date',
          formatFlag: true,
          rules: [{ required: false, message: '请选择' }],
          initialValue: info.joinAt
        },
        {
          label: '转正日期',
          key: 'fullAt',
          type: 'date',
          formatFlag: true,
          rules: [{ required: false, message: '请选择' }],
          initialValue: info.fullAt
        },
        {
          label: '户籍地址',
          key: 'idCardAddress',
          layoutCol: { xs: 16, md: 16, lg: 16 },
          initialValue: info.idCardAddress
        },
        {
          label: '现居地址',
          key: 'address',
          layoutCol: { xs: 24, md: 24, lg: 24 },
          initialValue: info.address
        }
      ]
    }
  },
  watch: {
    'info.idCard': {
      handler (val) {
        // const { info } = this
        // info.birthday = birthDayFromIdNo(val)
        // info.age = getAgeByNo(val)
        // info.gender = sexFromIdNo(val)
        // this.info = { ...info }
      }
    }
  },
  methods: {
    formChange (val, key) {
      // const { info } = this
      // if (key === 'idCard') {
      //   info.birthday = birthDayFromIdNo(val)
      //   info.age = getAgeByNo(val)
      //   info.gender = sexFromIdNo(val)
      //   this.info = { ...info }
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.basicBox{
  display: flex;
  flex-direction: row;

  .avatarFile{
    position: relative;
  }

  .contentBox {
    flex: 1;
    width: calc(100% - 300px);
    padding-left: 50px;
    box-sizing: border-box;

    .panel {
      width: 100%;
      > h3 {
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-top: 0;
        margin-bottom: 20px;
        position: relative;
      }
    }

  }

}
</style>
